<template>
  <div class="userPassword">
        <el-card class="box-card">
      <div slot="header" class="clearfix ">
        <span class="text">重置密码</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width=auto>
        <el-form-item label="原密码" prop="old_pwd"  >
          <el-input v-model="form.old_pwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new_pwd">
          <el-input v-model="form.new_pwd"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="re_pwd">
          <el-input v-model="form.re_pwd"></el-input>
        </el-form-item>
          <el-form-item class="buttons">
            <el-button class="sendButton" @click="submitForm()">修改密码</el-button>
            <el-button class="resetButton" @click="resetForm()">重置</el-button>
          </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { changePassWordAPI } from '@/api/user'
export default {
  data () {
    const password2 = (rule, value, callback) => {
      if (value !== this.form.new_pwd) {
        callback(new Error('两次输入密码不一致!'))
        return false
      } else {
        callback()
      }
    }
    return {
      form: {
        old_pwd: '',
        new_pwd: '',
        re_pwd: ''
      },
      rules: {
        old_pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^\w{6,15}$/, message: '密码长度为6~15', trigger: ['blur', 'change'] }
        ],
        new_pwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { pattern: /^\w{6,15}$/, message: '密码长度为6~15', trigger: ['blur', 'change'] }
        ],
        re_pwd: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: password2, trigger: ['blur', 'change'] },
          { pattern: /^\w{6,15}$/, message: '密码长度为6~15', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    // 提交修改基本信息
    async changeInfoAction () {
      try {
        const res = await changePassWordAPI(this.form)
        console.log(res)
        this.form = {
          old_pwd: '',
          new_pwd: '',
          re_pwd: ''
        }
      } catch (e) {
        console.log(e)
      }
    },
    submitForm () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          alert('submit!')
          await this.changeInfoAction()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm () {
      this.form = {
        old_pwd: '',
        new_pwd: '',
        re_pwd: ''
      }
    }
  }

}
</script>

<style lang='scss' scoped>
  .text {
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }
  .box-card {
    width: 1126px;
    ::v-deep .el-card__header{
      height: 68px;
      .text {
        font-size: 16px;
        margin: 5px 0;
        font-weight: 600;
      }
    }
    ::v-deep .el-form {
      .el-input__inner{
        width: 400px;
      }
      .buttons{
        padding-left: 66px;
        // 按钮效果
        .sendButton,.resetButton{
            padding: 5px 16px;
            height: 32px;
        }
        .sendButton{
            width: 88px;
            background-color: #4F81FF ;
            color: #FFF;
            &:hover{
                background-color:#608DFF ;
            }
        }
        .resetButton{
            width: 60px;
            background-color: #8f9397;
            color: #fff;
            &:hover{
                background-color:#a1a6ac;
            }
        }
      }

    }

  }
</style>
